<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Add Hosts</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="/libs/jquery.min.js"></script>
    <script src="/libs/tpl.js"></script>
    <script src="/js/model.js"></script>
    <script src="/js/pop.js"></script>
    <script src="/js/option.js"></script>
  </head>
  <body>
  <div class="inner">
    <h1>Host Switch Plus
        <small>Default: <select id="default"><option value="DIRECT">Direct</option><option value="SYSTEM">System</option></select>
        &nbsp;&nbsp;
        <label class="checkbox"><input id="status" type="checkbox" value="1" checked><span>Enable</span></label></small>
    </h1>

    <nav id="add_tab" class="tabNavs">
        <a href="#" data-target="#addForm" class="current" title="新增 Hosts 配置">Add</a>
        <a href="#" data-target="#bulkForm" title="批量添加">Bulk Add</a>
        <a href="#" data-target="#list" title="管理" id="listBtn">Hosts</a>
    </nav>
    <div class="tabConts">
        <form role="form" id="addForm" class="tabCont current">
            <div id="formNote" class="formNote" style="display:none;"></div>
            <input type="hidden" name="id" id="item-id">
            <div class="field">
                <label for="ip" class="col-xs-2 control-label">* IP：</label>
                <input type="text" autocomplete="off" placeholder="127.0.0.1 or 127.0.0.1:8888" id="ip" list="ip-list">
                <datalist id="ip-list"></datalist>
            </div>

            <div class="field">
                <label for="domain">* Domain：</label>
                <input type="text" placeholder="www.example.com" id="domain" list="domain-list">
                <datalist id="domain-list"></datalist>
            </div>

            <div class="field">
                <label>Tags：</label>
                <span id="div_labels" class="checkboxs"></span>
                <input type="text" id="add_labels" placeholder="Test,Dev,Shadowsockets,翻墙">
            </div>
            <div class="field">
                <label for="note">Note：</label>
                <input type="text" placeholder="Note" id="note">
            </div>
            <div class="field">
                <label for="note">Order：</label>
                <input type="number" placeholder="Order" id="order" value="1"> <span>The greater is preferred. 排序：数值越大越靠前，代理匹配时优先级越高</span>
            </div>


            <div class="field">
                <label></label>
                <input type="submit" value="Submit">
            </div>
        </form>
        <form action="#" id="bulkForm" class="tabCont bulkForm">
            <div class="field textareaField">
                <label for="bulkAdd"><strong>Hosts:</strong>
                    <small>One rule every line. 每行一条记录； 每条分别为 IP, Domain, Tags, Note，使用空格隔开；多个标签使用英文逗号,隔开
                        <br>For example:
                        <br>#支持泛域名匹配模式
                        <br>192.168.1.1 www.google.com
                        <br>192.168.1.1 *.xyz.com test
                        <br>127.0.0.1:8888 www.domain.com dev
                    </small>
                </label>
                <textarea id="bulkAdd"></textarea>
            </div>
            <div class="btnLine">
                <input type="submit" value="Submit">
            </div>
        </form>
        <div id="list" class="tabCont">
            <form action="#" id="searchForm" class="search">
                <input type="text" id="input_search" class="form-control input-sm" placeholder="Search Domain,IP,Tag.(ip:192. or tags:dev)" value="">
            </form>
            <div class="filter">Tags: <span id="label-filter" class="noBulk"></span></div>
            <table id="main-table" class="table table-hover table-condensed">
                <thead>
                    <tr>
                        <th width="20"><input id="select_all" type="checkbox"></th>
                        <th width="110">IP</th>
                        <th>Domain</th>
                        <th>Tag</th>
                        <th>Note</th>
                        <th>Order</th>
                        <th width="100"></th>
                    </tr>
                </thead>
                <tbody id="tbody-hosts" class="needBulk"></tbody>
            </table>
            <div class="bulkActions">
                <a href="#" id="but_del">Delete</a>
            </div>
        </div>
    </div>
    </div>
    <script id="host-item" type="text/template">
        <tr id="host-{=id}" data-id="{=id}" title="Updated at: {=uptime}">
            <td><input name="id[]" value="{=id}" type="checkbox"></td>
            <td>{=ip}</td>
            <td>{=domain}</td>
            <td class="tags">{=tags}</td>
            <td class="note">{=note}</td>
            <td>{=order}</td>
            <td>
                <span class="actions"><a href="#" data-id="{=id}" class="delete">Delete</a> <i class="I">|</i> <a href="#" data-id="{=id}" class="edit">Edit</a></span>
            </td>
        </tr>
    </script>
  </body>
</html>
